// 该组件为通用用户信息更新组件，被多个页面复用，已归类到 common 目录
<script setup lang="ts" generic="T extends Record<string, any>">
  import { ref } from 'vue'
  import { Field } from '@/types/user-info-update-option.ts'
  import { FormRules } from 'element-plus'
  import { submitForm } from '@/utils/validate.ts'

  const { fields, rules } = defineProps<{
    fields: Field[]
    rules: FormRules
  }>()
  const form = ref()
  const param = defineModel<T>({ default: {} as T })
</script>

<template>
  <el-form ref="form" class="update-form" :model="param" :rules="rules" label-position="top">
    <el-form-item
      v-for="item in fields"
      :key="item.prop"
      :label="item.type === 'button' ? '' : item.label"
      :prop="item.prop"
    >
      <el-input v-if="item.type === 'text'" v-model="param[item.prop]" type="text"></el-input>
      <el-input
        v-else-if="item.type === 'textarea'"
        v-model="param[item.prop]"
        type="textarea"
      ></el-input>
      <el-input
        v-else-if="item.type === 'password'"
        v-model="param[item.prop]"
        type="password"
      ></el-input>
      <el-date-picker
        v-else-if="item.type === 'date'"
        v-model="param[item.prop]"
        type="date"
        :value-format="item.format"
      ></el-date-picker>
      <el-button
        v-else-if="item.type === 'button'"
        type="primary"
        @click="submitForm(form, item.onClick, param)"
      >
        {{ item.label }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>
